<script setup>
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import { onMounted, nextTick } from 'vue'
import '@/assets/typora-vue-theme-master/vue.css'

onMounted(() => {
  nextTick(() => {
    hljs.highlightAll()
  })
})
defineProps({
  htmlContent: {
    type: String
  }
})
</script>
<template>
  <div v-html="htmlContent"></div>
</template>
<style scoped>
:root {
  --font-monospace: 'Fira Code', 'Roboto Mono', monospace !important;
}

::v-deep code {
  border-radius: 6px;
  font-family: var(--font-monospace);
}
</style>
